<template>
  <el-card style="max-width: 90%; margin: 0 auto">
    <template #header>
      <div class="card-header">
        <span style="font-size: 12px">查询条件</span>
      </div>
    </template>
    <el-form-item label="用户名称：">
      <el-input v-model="username" type="text" />
      <el-button @click="initTableData">查询</el-button>
    </el-form-item>
  </el-card>

  <br />
  <br />
  <!-- 新增用户 -->
  <div class="mb-4" style="max-width: 90%; margin: 0 auto">
    <el-button @click="addFormVisible = true">
      <el-icon><Plus /></el-icon>&nbsp;新增用户
    </el-button>
  </div>
  <br />
  <!-- 表格 -->
  <div style="max-width: 90%; margin: 0 auto">
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="account" label="账号" width="250" />
      <el-table-column prop="name" label="姓名" width="250" />
      <el-table-column prop="birthday" label="出生日期" width="250" />
      <el-table-column prop="operate" label="操作">
        <template #default="{ row }">
          <el-button
            link
            type="primary"
            size="small"
            @click="openEditDialog(row)"
            >编辑</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="confirmDelete(row)"
            >删除</el-button
          >
          <el-button link type="primary" size="small" @click="relatedClick(row)"
            >关联菜单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 分页 -->
    <div class="pagination-container">
      显示第{{ start + 1 }}到第{{ start + tableData.length }}条记录，总共{{
        total
      }}条记录
      <el-pagination
        size="small"
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <!-- 增加组件 -->
  <Add v-model:addFormVisible="addFormVisible" @refreshTable="initTableData" />
  <!-- 编辑组件 -->
  <Edit
    v-model:editFormVisible="editFormVisible"
    :editFormData="selectedRow"
    @refreshTable="initTableData"
  />
  <!-- 删除组件 -->
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <span>确定删除吗</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="deleteClick">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 关联组件 -->
  <Related
    v-model:relatedFormVisible="relatedFormVisible"
    :selectedUser="selectedUser"
  />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Plus, Right } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import http from "../../../util/http.js";
import Add from "./components/add.vue";
import Related from "./components/related.vue";
import Edit from "./components/edit.vue";
import dayjs from "dayjs";

//新增属性定义
const addFormVisible = ref(false);
//编辑属性定义
const editFormVisible = ref(false);
const selectedRow = ref(null);
//分页属性定义
const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const start = ref(0);
// 关联属性定义
const relatedFormVisible = ref(false);
const selectedUser = ref(null);

const relatedClick = (row) => {
  selectedUser.value = row;
  relatedFormVisible.value = true;
};
//用户属性定义
const username = ref("");

// 加载菜单
const initTableData = () => {
  const params = {
    page: currentPage.value,
    size: pageSize.value,
    name: username.value,
  };
  http.post("/user/getusertable", params).then((res) => {
    let result = res.data;
    // 格式化日期
    tableData.value = result.rows.map((row) => {
      return {
        ...row,
        birthday: dayjs(row.birthday).format("YYYY-MM-DD"),
      };
    });
    total.value = result.total;
    start.value = (currentPage.value - 1) * pageSize.value;
  });
};
// 分页功能
const handleSizeChange = (size) => {
  pageSize.value = size;
  initTableData();
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
  initTableData();
};

//编辑功能
const openEditDialog = (row) => {
  editFormVisible.value = true;
  selectedRow.value = row;
};

//删除功能
const dialogVisible = ref(false);
const deleteRow = ref(null);
const confirmDelete = (row) => {
  deleteRow.value = row;
  dialogVisible.value = true;
};

const deleteClick = () => {
  http.post("/user/deluser", { id: deleteRow.value.id }).then((res) => {
    if (res.code === 200) {
      ElMessage.success("删除成功");
      initTableData();
      dialogVisible.value = false;
    } else {
      ElMessage.error("删除失败");
    }
  });
};

onMounted(() => {
  initTableData();
});
</script>

<style scoped>
:deep .el-form-item__content {
  flex-wrap: nowrap;
}
.el-input {
  margin-right: 10px;
}
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
